import { Text, View } from '@tarojs/components';
import BasicLayout from '@/components/BasicLayout';
import useNavBarInfo from '@/hooks/useNavBarInfo';
import useViewer from '@/hooks/useViewer';
import { Input } from '@nutui/nutui-react-taro';
import { useCallback, useEffect, useState } from 'react';
import Taro from '@tarojs/taro';
import gql from 'graphql-tag';
import useMutation from '@/hooks/useMutation';


const UpdInformationMutation = gql`
  mutation UpdInformation($name:String!,$address:String!,$account:String!){
    updInformation(name:$name,address:$address,account:$account){
      message
    }
  }
`
const MyAddress = () => {
  const { data } = useViewer()
  // 获取状态栏信息
  const { contentHeight } = useNavBarInfo();
  const [name, setName] = useState(data?.name || "")
  const [address, setAddress] = useState(data?.address || "")
  const [account, setAccount] = useState(data?.account || "")
  const [upd] = useMutation(UpdInformationMutation, {
    onCompleted() {
      Taro.showToast({ title: "修改成功", icon: 'none' })
    },
    onError(error) {
      Taro.showToast({ title: error.message, icon: 'none' })
    },
  })
  useEffect(() => {
    if (!data) return;
    setName(data.name)
    setAddress(data.address)
    setAccount(data.account)
  }, [data])
  const onFinish = useCallback(() => {
    if (account.length != 11) {
      Taro.showToast({ title: "请输入11位手机号码", icon: 'none' })
      return;
    }
    if (!address) {
      Taro.showToast({ title: "请输入收货地址", icon: 'none' })
      return;
    }
    upd({ name, account, address })
  }, [account, name, address])
  return (
    <BasicLayout>
      <View className='w-full bg-[#fff]' style={{ height: contentHeight }}>
        <View className="flex-justify flex-col">
          <View className="flex flex-col px-[70rpx]">
            <View className="flex-center overflow-hidden shadow-[0_0_60rpx_0_rgba(43,86,112,.1)] rounded-[40rpx]">
              <Input onChange={setName} value={name} placeholder="收货人姓名" />
            </View>
            <View className="mt-[40rpx] flex-center overflow-hidden shadow-[0_0_60rpx_0_rgba(43,86,112,.1)] rounded-[40rpx]">
              <Input onChange={setAddress} value={address} placeholder="收货人地址" />
            </View>
            <View className="mt-[40rpx] flex-center overflow-hidden shadow-[0_0_60rpx_0_rgba(43,86,112,.1)] rounded-[40rpx]">
              <Input onChange={setAccount} value={account} placeholder="收货人联系电话" />
            </View>
          </View>
        </View>
      </View>
      <View className="fixed left-0 right-0 bottom-[60rpx] w-[600rpx] h-[80rpx] mx-auto rounded-[60rpx] bg-[#157658] color-[#fff] flex-center z-[899]">
        <Text onClick={onFinish} className="ml-[10rpx] text-[30rpx]">修改地址</Text>
      </View>
    </BasicLayout>
  );
};

export default MyAddress;
